<template>
    <a-card title="酒店相册" :bordered="false">
        <!-- Card Header -->
        <template slot="extra">
            <a-form layout="inline" @submit.prevent="searchSubmit">
                <a-form-item>
                    <a-input v-model="searchForm.name" placeholder="相册名称"
                             :allowClear="$store.getters.allowClear"
                    ></a-input>
                </a-form-item>

                <a-form-item  >
                    <a-select   placeholder="所属酒店"  :allowClear="$store.getters.allowClear" showSearch v-model="searchForm.hotelId" style="width: 200px">
                        <a-select-option v-for="(item, index) in HotelProfileOPT" :key="index" :value="item.value">
                            {{item.label}}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-item  >
                    <a-select placeholder="相册类型"  :allowClear="$store.getters.allowClear" showSearch v-model="searchForm.type"  style="width: 120px">
                        <a-select-option v-for="(item, index) in AlbumTypeOPT" :key="index" :value="item.value">
                            {{item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-item>

                <a-form-model-item>
                    <a-button @click="searchRest">重置</a-button>
                </a-form-model-item>

                <a-form-item>
                    <a-button icon="search" type="primary" html-type="submit">搜索</a-button>
                </a-form-item>
                <a-form-item>
                    <a-button icon="search" type="primary" @click="openModal()">添加相册</a-button>
                </a-form-item>
            </a-form>
        </template>
        <a-list :grid="{ gutter:8, column: 4 }"
                :pagination="pagination"
                :data-source="dataSource">
            <a-list-item slot="renderItem" slot-scope="item, index" :bordered="false">
                <a-card hoverable style="width: 100%">
                    <img  slot="cover" alt="example" :src="item.coverPhoto"/>
                    <a-card-meta :title="item.name">
                        <template slot="description">
                            {{ $exMod.findDict(HotelProfileOPT,item.hotelId) }}
                            /
                            {{ $exMod.findDict(AlbumTypeOPT,item.type) }}
                        </template>
                    </a-card-meta>
                    <template slot="actions" class="ant-card-actions">
                        <a @click="openModal(item)">
                            <a-icon type="edit"/>
                            编辑
                        </a>
                        <a @click="openShowAlbum(item)">
                            <a-icon type="picture"/>
                            照片
                        </a>

                        <a-popconfirm
                                title="确定要删除这个相册吗？"
                                @confirm="removeAlbum(item)">
                            <a-icon type="delete"/>删除
                        </a-popconfirm>

                    </template>
                </a-card>
            </a-list-item>
        </a-list>
        <editModal v-if="editShow" :editRecord="editRecord" @closeModal="closeModalHandler"/>
        <AlbumModal v-if="albumModalShow" :showRecord="showRecord" @closeModal="albumModalShow=false"/>
    </a-card>
</template>
<script>

import {pagination} from '../public/colums.js';
import {hotelAlbumList, hotelAlbumDelete} from '../public/http.js';
import {dictLoad, hotelProfileDict} from "../../../util/internal.api";

export default {
    components: {
        editModal: () => import('./edit'),
        AlbumModal: () => import('./AlbumModal')
    },
    data() {
        return {
            showSrc: '',
            editShow: false, //打开编辑器
            editRecord: {}, //正在编辑的记录
            dataSource: [],
            albumModalShow: false,
            showRecord: {},
            pagination: {
                ...pagination,
                pageSize: 8,
                onChange: current => {
                    this.pagination.current = current;
                    this.getAlbumList();
                }
            },
            loading: false, //表格loading
            searchForm: {
                name: '',
                beginDate: null,
                endDate: null,
            },
            AlbumTypeOPT: [],
            HotelProfileOPT: [],
        };
    },
    methods: {
        openShowAlbum(record) {
            this.albumModalShow = true;
            this.showRecord = record;
        },
        rangeDateOnChange(date, dateString) {
            this.searchForm.beginDate = dateString[0];
            this.searchForm.endDate = dateString[1];
        },
        closeModalHandler(e) {
            this.editShow = false;
            this.editRecord = {};
            if (e.render) {
                this.getAlbumList();
            }
        },
        //1.0 获取表格数据
        getAlbumList() {
            this.loading = true;
            let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
            hotelAlbumList(this.pagination, searchData).then(res => {
                this.loading = false;
                if (res.code === 0) {
                    this.dataSource = res.data.result; //表格数据
                    this.pagination.total = res.data.total; //总记录条数
                }
            });
        },


        //2.0 删除相册

        removeAlbum(record) {

            hotelAlbumDelete(record.id).then(res => {
                this.$exMod.ajaxMessage(res);
                if (res.code === 0) {
                    this.getAlbumList();
                }
            })

        },


        //3.0 搜索提交
        searchSubmit() {
            this.pagination.current = 1;
            this.getAlbumList();
        },
        //3.1重置搜索
        searchRest() {
            this.searchForm={};
            this.getAlbumList();
        },

        openModal(obj) {
            this.editShow = true;
            this.editRecord = obj
        },
        //数据初始化
        async init() {
            await dictLoad("HotelAlbumType").then(res => this.AlbumTypeOPT = res);
            await hotelProfileDict().then(res => this.HotelProfileOPT = res);
            this.getAlbumList();
        }
    },
    created() {
        this.init();
    }
};
</script>
